<template>
  <div class="message">
    <nav-top title="消息中心"></nav-top>

    <ul class='msgAll'>
      <li v-for='(val,key) in msgList'
          class='msgList'
          :key='key'>
        <div class="img">
          <img :src="val.imgUrl"
               alt="">
        </div>
        <div class="right">
          <div class='one'>
            <span class="name">{{val.name}}</span>
            <span class="date">{{val.date}}</span>
          </div>
          <div class='two'>
            <div class="content">{{val.content}}</div>
            <span v-if="val.number"
                  class='number'>{{val.number}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
export default {
  name: "ProductList",
  components: {
    NavTop,
  },

  data () {
    return {
      msgList: [{
        imgUrl: '/static/icon/self/default-avatar.png',
        name: "用户名",
        date: '19/08/28',
        content: '对话内容对话内容对话内容对话内容对话内容对话内容对话内容对话内容对话内容对话内容',
        number: 1
      }],
    };
  }, mounted () {

  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.message {
  padding-bottom: 60px;
  .msgAll{
    margin-top: 50px;
  }
  .msgList {
    border-bottom: 1px solid #f2f2f2;
    height: 52px;
    display: flex;
    padding-top: 7px;
    .img {
      margin-left: 10px;
      width: 44px;
      height: 44px;
      img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
      }
    }
    .right {
      width: 100%;
      margin-left: 9px;
      .one {
        .name {
          font-size: 13px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(53, 53, 53, 1);
        }
        .date {
          font-size: 10px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          float: right;
          margin-right: 12px;
        }
      }
      .two {
        display: flex;
        position: relative;
        .content {
          line-height: 22px;
          display: -webkit-box;
          width: 219px;
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /*! autoprefixer: on */
          -webkit-line-clamp: 1;
          overflow: hidden;
          font-size: 10px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
        .number {
          display: inline-block;
          border-radius: 50%;
          text-align: center;
          background: #06a44f;
          width: 14px;
          height: 14px;
          line-height: 14px;
          position:absolute;
          right: 12px;
          font-size: 7px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
</style>